/*----------------------------------------*/
/*  Custom background helpers Styles 
/*----------------------------------------*/

//
// Custom background helpers
//

// Hover color
.bg-hover,
[class^="bg-hover-"] {
  cursor: pointer;
  transition: $transition;

  &:hover {
    transition: $transition;
  }
}

// Background theme colors
@each $color, $value in $theme-colors {
  @include bg-variant(".bg-#{$color}", $value, true);

  // Hover & Diagonal style color
  .bg-hover-#{$color}:hover,
  .hoverable:hover .bg-hover-#{$color},
  .bg-diagonal-#{$color}:before,
  .bg-diagonal-r-#{$color}:after {
    background-color: $value !important;
  }

  // Hover state color
  .bg-hover-state-#{$color} {
    &:hover {
      background-color: theme-hover-color($color) !important;
    }
  }

  // Radial gradient colors
  .bg-radial-gradient-#{$color} {
    background-color: $value;
    background-image: radial-gradient(
      circle,
      rgba(theme-light-color($color), 0.4),
      $value 70%
    );
  }

  // Opacity
  @for $opacity from 1 through 10 {
    @if $opacity%2==0 {
      .bg-#{$color}-o-#{$opacity * 5},
      .bg-hover-#{$color}-o-#{$opacity * 5}:hover {
        background-color: rgba($value, ($opacity * 20 / 1000)) !important;
      }
    }
  }
}

@if $enable-gradients {
  @each $color, $value in $theme-colors {
    @include bg-gradient-variant(".bg-gradient-#{$color}", $value, true);
  }
}

// Background theme light colors
@each $color, $value in $theme-light-colors {
  // Initial & Hover & Diagonal style
  .bg-light-#{$color},
  .bg-hover.bg-light-#{$color}:hover,
  .bg-hover-light-#{$color}:hover,
  .bg-diagonal-light-#{$color}::before {
    background-color: $value !important;
  }
}

// Gray background colors
@each $color, $value in $grays {
  .bg-gray-#{$color},
  .bg-hover.bg-gray-#{$color}:hover,
  .bg-hover-gray-#{$color}:hover {
    background-color: $value !important;
  }
}

// Background color transparent
.bg-transparent {
  background-color: transparent;
}

.bg-transparent-i {
  background-color: transparent !important;
}

// Background size
.bgi-size-length {
  background-size: length;
}

.bgi-size-cover {
  background-size: cover;
}

.bgi-size-contain {
  background-size: contain;
}

// Background repeat
.bgi-no-repeat {
  background-repeat: no-repeat;
}

// Background positions
.bgi-position-y-top {
  background-position-y: top;
}

.bgi-position-y-bottom {
  background-position-y: bottom;
}

.bgi-position-y-center {
  background-position-y: center;
}

.bgi-position-x-left {
  background-position-x: left;
}

.bgi-position-x-right {
  background-position-x: right;
}

.bgi-position-x-center {
  background-position-x: center;
}

.bgi-position-top {
  background-position: 0 top;
}

.bgi-position-bottom {
  background-position: 0 bottom;
}

.bgi-position-center {
  background-position: center;
}

// Transparent Background
.bg-transparent {
  background-color: transparent;
}

// Diagonal Background
.bg-diagonal {
  position: relative;
  background-color: $white;
  overflow: hidden;

  .card-body {
    position: relative;
    z-index: 2;
  }

  &:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $gray-100;
  }

  &:after {
    content: " ";
    width: 200%;
    height: 1000px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 45%;
    transform: rotate(20deg);
    background-color: $white;
  }
}
